<template>
  <el-select
    :value="value"
    :placeholder="placeholder"
    :filterable="filterable"
    :clearable="clearable"
    :disabled="disable"
    @input="handleChange"
  >
    <slot />
    <el-option
      v-for="(item, index) in showList"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { getDictDataByTypeCustom } from '@/utils/JsonCacheUtil'
export default {
  name: 'MySelect',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
      required: false,
      type: String
    },
    // eslint-disable-next-line vue/require-default-prop
    label: String,
    placeholder: {
      type: String,
      default: '请选择'
    },
    filterable: Boolean,
    clearable: Boolean,
    // eslint-disable-next-line vue/require-default-prop
    dictType: String, // 字典类型
    // eslint-disable-next-line vue/require-default-prop
    default: String,
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showList: []
    }
  },
  created() {
    this.showList = getDictDataByTypeCustom(this.dictType)
  },
  methods: {
    handleChange(val) {
      this.showList.forEach((item) => {
        if (item.value === val) {
          this.$emit('update:label', item.label)
          return true
        }
      })
      this.$emit('input', val)
      this.$emit('change', val)
    }
  }
}
</script>
